<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
    <head>
        <title>Spring Security OAuth 2.0 Sample</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
    </head>
    <body>
        <div th:fragment="header">
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="container-fluid">
                        <div class="navbar-collapse collapse" id="navbar">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="dropdown">
                                    <a id="user-menu" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <span sec:authentication="name">User</span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a id="signOut" href="javascript:">Sign Out</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="container">
            <div class="panel panel-default">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div>
                            <p style="font-size:medium">获取用户订单信息</p>
                            <div class="form-row">
                                <div class="form-group">
                                    <label style="font-size:small">Username:</label>
                                    <label style="font-size:small" id="username"></label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label style="font-size:small">订单:</label>
                                    <label style="font-size:small" id="orderinfo"></label>
                                </div>
                            </div>
                            <button id="getOrder" class="btn btn-primary btn-sm">获取订单信息</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
        <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <script src="/webjars/bootstrap/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
        <script>
            $("#getOrder").click(function () {
               var token = $.cookie('access_token');
                $.ajax({
                    //请求方式
                    type : "GET",
                    //请求的媒体类型
                    contentType: "application/json;charset=UTF-8",
                    headers: {
                        Authorization: "bearer "+token
                    },
                    //请求地址
                    url: "http://localhost:6100/price/price/1",
                    //请求成功
                    success : function(result) {
                        console.log(result);
                        $("#orderinfo").text(JSON.stringify(result));
                        $("#username").text(result['username']);
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                        console.log(e.status);
                        // alert("请求失败"+e.responseText);
                        // 刷新令牌
                        refreshToken();
                        // setTimeout(function () {
                        //     window.location.replace("http://localhost:6090/login-code");
                        // },500)
                    }
                });
            })

            $("#signOut").click(function () {
                $.removeCookie('access_token', {domain:'localhost'});
                window.location.href="http://localhost:6001/logout?redirect_uri=http://localhost:6090/login-code";
            })

            function refreshToken() {
                var refresh_token = $.cookie('refresh_token');
                $.ajax({
                    //请求方式
                    type : "GET",
                    //请求的媒体类型
                    contentType: "application/json;charset=UTF-8",
                    //请求地址
                    url: "http://localhost:6090/token/refresh?refreshToken="+refresh_token,
                    //请求成功
                    success : function(result) {
                        var token = result['access_token'];
                        $.cookie('access_token', token);
                        $("#getOrder").click();
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                        setTimeout(function () {
                            window.location.replace("http://localhost:6090/login-code");
                        },500)
                    }
                });
            }
        </script>
    </body>
</html>
